Understanding the :placeholder-shown Pseudo-Class in CSS
The :placeholder-shown pseudo-class in CSS targets input or textarea elements that are currently displaying their placeholder text. This allows you to style elements differently when they are empty and showing a placeholder.
Applies only to form elements with a
placeholderattribute that is currently visible.Helps indicate an empty state visually or apply custom styling when input is not yet filled.
Once the user enters text, the element no longer matches
:placeholder-shown.
In this example, inputs with visible placeholders have a dashed gray border and light gray background. When the user types into the input, the border turns solid green and the background becomes light green, providing a clear visual cue.
Use
:placeholder-shownto differentiate empty inputs from filled inputs.Combine with transitions for smooth visual feedback as the user types.
Do not rely solely on color; provide additional cues for accessibility.
Test across browsers, as placeholder behavior may vary slightly.